<template>
  <div>
   <div class="box">
    <div>
      <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <div class="shuxing">
        <el-form-item label="行政区划" prop="">
          <treeselect
            class="shuxing1"
            v-model="queryParams.enterArea"
            :options="deptOptions"
            :normalizer="normalizer"
            placeholder="选择区域"
          />
        </el-form-item>
      </div>
      <el-form-item label="备案主体" prop="">
        <el-input
          v-model="queryParams.enterName"
          placeholder="请输入备案主体"
        />
      </el-form-item>

      <el-form-item label="组织形式" prop="mainCertificeType">
        <el-select
          v-model="queryParams.orgId"
          placeholder="请选择组织形式"
          clearable
          size="small"
        >
          <el-option label="企业/个体工商户" value="企业/个体工商户" />
          <el-option label="合作社" value="合作社" />
          <el-option label="家庭农场" value="家庭农场" />
          <el-option label="个人" value="个人" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="主体属性" prop="mainCertificeType">
        <el-select
          v-model="queryParams.sysProId"
          placeholder="请选择主体属性"
          clearable
          size="small"
        >
          <el-option label="一般主体" value="一般主体" />
          <el-option label="屠宰场" value="屠宰场" />
          <el-option label="生鲜乳企业" value="生鲜乳企业" />
          <el-option label="加工企业" value="加工企业" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="认证类型" prop="mainCertificeType">
        <el-select
          v-model="queryParams.mainCertificeType"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
      </div>

      <div id="container"></div>
      <div class="box-content">
        <h1 class="th1">共<span>{{ total }}</span>条数据</h1>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="otable"
          cell-mouse-enter="fun"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          
          <el-table-column prop="enterName" label="主体信息" width="">
          </el-table-column>
          
        </el-table>
       
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination, Table } from "element-ui";
import {
  listEnterpriseInfo,
  getEnterpriseInfo,
  delEnterpriseInfo,
  addEnterpriseInfo,
  updateEnterpriseInfo,
  exportEnterpriseInfo,
  getTree,
} from "@/api/enterpriseInfo/EnterpriseInfo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      // 行政区划
      deptOptions:[],
        // 地图属性
      viewMode: "3D",
      zoom: 8,
      center: [116.4, 39.92],
      resizeEnable: true,
      map: "",
      total: 0,
      infoWindow: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterName: undefined,
        enterArea: undefined,
        plantId: undefined,
        orgId: undefined,
        sysProId: undefined,
        mainCertificeType: undefined,
        enterAddress: undefined,
        socialCreditCode: undefined,
        productOperationType: undefined,
        longitude: undefined,
        dimension: undefined,
        industry: undefined,
        enterIdcard: undefined,
        enterImg: undefined,
        enterLicenseImg: undefined,
        createDate: undefined,
      },
      options1: [
        {
          value: "无公害产品",
          label: "无公害产品",
        },
        {
          value: "绿色食品",
          label: "绿色食品",
        },
        {
          value: "有机农产品",
          label: "有机农产品",
        },
        {
          value: "地理标志农产品",
          label: "地理标志农产品",
        },
        {
          value: "名特优新农产品",
          label: "名特优新农产品",
        },
        {
          value: "GAP认证农产品",
          label: "GAP认证农产品",
        },
      ],
    //   表格属性
       tableData: [], 
    };
  },
  created() {
    this.getList();
    this.getTree();
  },
  methods: {
    fun(){
      console.log(this,"12")
    },
    //   单击表格某一行时
    otable(e) {
      console.log("tr",e);
      this.map1(e);
    },
    // 行政区划分列表
    getTree() {
      this.loading = true;
      getTree().then((response) => {
        this.deptOptions = this.handleTree(response.data, "id");
      });
    },
 /** 转换部门数据结构 */
    normalizer(node) {
      console.log(JSON.stringify(node)+"11111111111111111111111111111111111111111111111111111")
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      };
    },
    /** 查询种植主体管理列表 */
    getList() {
      this.loading = true;
      listEnterpriseInfo(this.queryParams).then((response) => {
        this.tableData = response.rows;
        console.log("a1",response.rows);
        this.total = response.total;
        this.loading = false;
         this.map1();
      });
    },
    
    // 地图的设置
    map1(str) {
      console.log("str",str);
      if(str)
      {
        this.zoom=11;
      this.map = new AMap.Map("container", {
              viewMode: this.viewMode,
              zoom: this.zoom,
              center: [str.longitude,str.dimension],
              resizeEnable: this.resizeEnable,
            });
      }
      else{
         this.zoom=8;
        this.map = new AMap.Map("container", {
        viewMode: this.viewMode,
        zoom: this.zoom,
        center: [106.20,37.98],
        resizeEnable: this.resizeEnable,
      });
      }
      

      for (let i = 0; i < this.tableData.length; i++) {
        var text = new AMap.Text({
          text: this.tableData[i].enterName,
          anchor: "center", // 设置文本标记锚点
          draggable: false,
          cursor: "pointer",
          angle: 10,
          style: {
            padding: ".75rem 1.25rem",
            "margin-bottom": "1rem",
            "border-radius": ".25rem",
            "background-color": "white",
            "border-width": 0,
            "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
            "text-align": "center",
            "font-size": "20px",
            color: "blue",
          },
          title:  this.tableData[i].enterName,
          clickable: true,
          position: [this.tableData[i].longitude,this.tableData[i].dimension],
        });

        // 自定义属性
        text.num = i;
        // 单击事件
        text.on("click", this.openInfo);
        text.setMap(this.map);
      }
    },
    showInfoClick() {
      this.map && this.map.destroy();
      this.map = null;
      (this.center = [117.4, 39.92]), this.map1();
    },
    fun2(e) {
      console.log("fun2", e);
    },
    openInfo(e) {

        let index=e.target.num;
      //构建信息窗体中显示的内容
      var info = [];
      info.push(
        '<div><div></div> '
      );
      info.push('<div style="padding:0px 0px 0px 4px;">'+this.tableData[index].enterName+'<b></b>');
      info.push('法人：'+this.tableData[index].legalName+'</b>');
      info.push("电话 : "+this.tableData[index].enter_idcard+" 邮编 : 100102");
      info.push("地址 :"+this.tableData[index].enterAddress+"</div></div>");
      this.infoWindow = new AMap.InfoWindow({
        // position:,
        content: info.join("<br/>"), //使用默认信息窗体框样式，显示信息内容
      });

      this.infoWindow.open(this.map,  [this.tableData[index].longitude,this.tableData[index].dimension],);
    },

    // 多选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
      /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
       this.queryParams= {
        pageNum: 1,
        pageSize: 10,
        enterName: undefined,
        enterArea: undefined,
        plantId: undefined,
        orgId: undefined,
        sysProId: undefined,
        mainCertificeType: undefined,
        enterAddress: undefined,
        socialCreditCode: undefined,
        productOperationType: undefined,
        longitude: undefined,
        dimension: undefined,
        industry: undefined,
        enterIdcard: undefined,
        enterImg: undefined,
        enterLicenseImg: undefined,
        createDate: undefined,
      },
      this.handleQuery();
    },
  },
  mounted() {
   
  },
};
</script>

<style lang="scss" scoped>

.box {
  width: 100%;
  // height: 100%;
  margin-top: 0px;
  padding: 50px 0 50px 50px;
  box-sizing: border-box;
}
#container {
  height: 800px;
  width: 72%;
  float: left;
  border: 4px solid rgba(113, 183, 216, 0.3);
}
.box-content {
  position: relative;
  width: 20%;
  min-width: 300px;
  height: 800px;
  margin-left: 30px;
  float: left;
  background-color: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 8px;
  .th1 {
    font-size: 30px;
    span {
      font-size: 38px;
      color: red;
    }
  }
}
.title {
  margin-left: 50px;
  margin-top: 50px;
}
.shuxing {
  width: 250px;
  float: left;
  .shuxing1{
    width: 150px !important;
    height: 35px;
  }
  
}
.el-table--enable-row-hover{
  cursor:pointer;
}
</style>